<template>
    <div class="my-card">
        <van-checkbox v-if="showCheckbox" :model-value="checked" @update:model-value="handleChange" />
        <van-card v-bind="$attrs">
            <template #num>
                <van-stepper  theme="round" button-size="22" disable-input :model-value="num"
                @update:model-value="handleChangeNum" />
            </template>
        </van-card>
    </div>
</template>

<script lang="ts" setup>


defineProps<{ 
    //是否显示checkbox元素
    showCheckbox?: boolean;
    //checked元素是否勾选
    checked?: boolean; 
    //商品数量
    num?:number;
}>();

const emit = defineEmits(["change","update:num"])

//勾选框处理函数
const handleChange = (isChecked:boolean)=>{
    // console.log("handleChange",isChecked)
    //触发一个自定义事件,通知父组件
    //选项式中,通过this.$emit
    //setup选项中,通过setup函数接受到的第二个参数中的emit
    //setip语法糖,通过defineEmits
    emit('change',isChecked);
}

const handleChangeNum=(num:number)=>{
    // console.log("handleChangeNum",num)
    //触发一个自定义事件,通知父组件
    emit("update:num",num)
}
//定义props通过一个 defineProps的函数
//defineProps defineEmit defineExpose 它们三个是编译器去处理(不需要引入)
// 数组方法 defineProps(["price"])
// interface IProps{
//     price?: string;
//     title: string;
// }
// const props=defineProps<IProps>();
</script>

<style lang="scss" scoped>
.my-card {
    display: flex;

    .van-card {
        flex: 1;
        margin-top: 0;
    }

    .van-checkbox {
        padding: 0 10px 0 15px;
    }
}
</style>